<template>
	<view class="credit-cont">
		<view class="credit-cont-head">
			<view class="credit-cont-head-progress">
				<canvas class="credit-cont-head-progress-bg" canvas-id="cpbg"></canvas>
				<canvas class="credit-cont-head-progress-bar" canvas-id="cpbar"></canvas>
				<block v-if="applyState == 0">
					<view class="credit-cont-head-progress-txt">
						<view class="credit-cont-head-progress-txt-info">{{creditData.youpin_limit||0}}</view>
						<text>我的额度</text>
					</view>
				</block>
				<block v-else>
					<view class="credit-cont-head-progress-txt">
						<view class="credit-cont-head-progress-txt-info">{{quota||0}}</view>
						<text>可申请额度</text>
					</view>
				</block>
				<view class="credit-cont-head-progress-time" v-if="applyState == 0">评估时间：{{accept_time}}</view>
			</view>
			
			<block v-if="applyState == 0">
				<view class="credit-cont-head-mid">
					<view class="credit-cont-head-mid-money">{{creditData.total_debt||0}}</view>
					<view class="credit-cont-head-mid-text">本月待还</view>
					<view class="credit-cont-head-mid-info flex f-a-center">
						<view class="credit-cont-head-mid-info-date">{{creditData.credit_due_date}}</view>
						<view class="credit-cont-head-mid-info-money">{{creditData.useable_youpin_limit}}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="credit-cont-bill" v-if="applyState == 0">
			<view class="credit-cont-bill-title">账单明细共{{creditData.billCount}}笔</view>
			<view class="credit-cont-bill-list" v-if="billList.length > 0">
				<view class="credit-cont-bill-list-item" v-for="(item,index) in billList" :key="index">
					<radio class="credit-cont-bill-list-item-radio" v-if="item.pay_status == 0" color="#0aac2a" :checked="index === currentIndex" @tap="radioChange(index)" />
					<view class="credit-cont-bill-list-item-time">{{item.due_info.format_create_time}}</view>
					<view class="credit-cont-bill-list-item-info flex f-a-center">
						<view class="credit-cont-bill-list-item-info-text f-one-ellipsis" v-if="item.order_info">{{item.order_info.goods_name}}</view>
						<view class="credit-cont-bill-list-item-info-money"><strong>{{item.money}}</strong></view>
					</view>
					<view v-if="deitalIndex != index" class="credit-cont-bill-list-item-arrow" @tap="showDeital(index)"><arrow size="40" color="#807f7f" :direction="deitalIndex == index?'top':'bottom'"></arrow></view>
					<view v-if="deitalIndex == index">
						<view class="credit-cont-bill-list-item-page">
							<view class="credit-cont-bill-list-item-page-text">订单号</view>
							<view class="credit-cont-bill-list-item-page-num">{{item.order_no}}</view>
						</view>
						<!-- <view class="credit-cont-bill-list-item-page">
							<view class="credit-cont-bill-list-item-page-text">金额</view>
							<view class="credit-cont-bill-list-item-page-num"><strong class="credit-cont-bill-list-item-page-num-money red">{{item.money}}</strong></view>
						</view> -->
						<view class="credit-cont-bill-list-item-page">
							<view class="credit-cont-bill-list-item-page-text">账单状态</view>
							<view class="credit-cont-bill-list-item-page-num red">{{item.state_text}}</view>
						</view>
						<view class="credit-cont-bill-list-item-page">
							<view class="credit-cont-bill-list-item-page-text">支付状态</view>
							<view class="credit-cont-bill-list-item-page-num">{{item.pay_status_text}}</view>
						</view>
						<view class="credit-cont-bill-list-item-line"></view>
						<view class="credit-cont-bill-list-item-page">
							<view class="credit-cont-bill-list-item-page-text">创建时间</view>
							<view class="credit-cont-bill-list-item-page-num">{{item.due_info.create_time}}</view>
						</view>
						<view class="credit-cont-bill-list-item-page" v-if="item.due_info.pay_time">
							<view class="credit-cont-bill-list-item-page-text">还款时间</view>
							<view class="credit-cont-bill-list-item-page-num">{{item.due_info.pay_time}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
			
		</view>
		<view class="credit-cont-btn" v-if="applyState == 0">
			<view class="flex1" :class="{gay:currentIndex < 0}"  @tap="showToggle('open')">还款</view>
			<navigator open-type="navigate" hover-class="none" class="flex1 credit-cont-btn-all" url="/pages/credit/credit_pay">一键还款</navigator>
		</view>
		<view class="credit-cont-btn-bg" v-if="applyState == 0"></view>
		<view class="credit-cont-btn-apply" :class="{applyGay:applyState == -1}" @tap="apply()" v-if="applyState != 0">{{btnText}}</view>
		<view class="credit-cont-btn-explain" @tap="showRule" v-if="applyState != 0">授信规则说明<image src="../../static/icons/jewel/help_icon.png"></image></view>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="showMark"/>
		<uni-transition :duration="500" :mode-class="['slide-bottom','fade']" :styles="transfromClass" :show="transShow">
			<view class="pay-box">
				<view @tap="showToggle('close')"><close class="pay-box-close" size="32" color="#535353"></close></view>
				<view class="pay-box-title">支付方式</view>
				<view class="pay-box-cont">
				    <view class="pay-box-cont-item" @tap="choosePay(item.type)" v-for="(item,index) in payList" :key="index">
						<view class="pay-box-cont-item-info">
							<image :src="item.icon_text"></image>
							<view class="pay-box-cont-item-info-text">{{item.name}}</view>
						</view>
						<view class="pay-box-cont-item-icon">
							<image :src="paytype == item.type ? '../../static/icons/pay-select-act.png' : '../../static/icons/pay-select.png'"></image>
						</view>
				    </view>
				</view>
				<view class="pay-box-btn" :class="{gay:!paytype}" @tap="pushOrder">确认</view>
			</view>
		</uni-transition>
		
		<uni-transition :duration="500" :mode-class="['zoom-in','fade']" :styles="transfromClass" :show="isShowRule">
			<view class="credit-cont-rule">
				<jyf-parser :html="ruleData" ref="article"></jyf-parser>
				<image class="credit-cont-rule-close" src="../../static/icons/jewel/sign_close.png" @tap="showRule"></image>
			</view>
		</uni-transition>
		
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				creditData:{},
				billList:[],
				modeClass:['fade'],
				transShow:false,
				showMark:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				loadMoreStatus:1,
				page:1,
				total_pages:1,
				payList:[],
				paytype:'',
				currentIndex:-1,
				deitalIndex:-1,
				percent:0,
				applyState:0,
				accept_time:'',
				quota:0,
				isShowRule:false,
				ruleData:'',
				btnText:'申请授信'
			};
		},
		mounted: function() {
			this.drawProgressbg();
			
		},
		methods: {
			getData(type){
				let that = this
				if(that.page <= that.total_pages){
					jewel.get('credit_bill/bill_list',{page:that.page},true,function(res){
						if(type=='load') uni.hideLoading()
						if(type=='loadMore'){
							that.billList = that.billList.concat(res.data.data)
						}else{
							that.creditData = res.data
							that.creditData.billCount = res.data.count
							that.billList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages <= 1 ? 2:0
							uni.stopPullDownRefresh()
							that.percent = parseInt((Number(that.creditData.youpin_limit) - Number(that.creditData.total_debt)) / Number(that.creditData.youpin_limit) * 100)
							
							that.drawCircle(that.percent)
						}
					})
				}else{
					that.loadMoreStatus = 2
				}
			},
			pushOrder(){
				let that = this
				if(!that.paytype) return false
				let data = {
					id:that.billList[that.currentIndex].id,
					paytype:that.paytype
				}
				that.showToggle('close')
				uni.showLoading({
					title:'支付中...',
					mask:true
				})
				jewel.post('credit_bill/pay',data,true,function(res){
					let billdata = res.data
					setTimeout(()=>{
						uni.hideLoading()
						if(billdata.code == 0){
							uni.requestPayment({
								provider: that.paytype,
								orderInfo: billdata.data.pay_data.data, //微信、支付宝订单数据,
								success: (res) => {
									jewel.showToast(billdata.msg)
									that.page = 1
									that.currentIndex = -1
									that.getData()
								},
								fail: (res) => {
									console.log(JSON.stringify(res))
									jewel.showToast('支付失败');
								}
							})
						}else{
							jewel.showToast(billdata.msg)
						}
					},1000)
				})
			},
			//申请授信
			apply(){
				let that = this
				if(that.applyState == -2){
					uni.showLoading({
						title:'申请中...',
						mask:true
					})
					jewel.post('credit_bill/apply_credit',{},true,function(res){
						setTimeout(()=>{
							jewel.showToast(res.data.msg,res.data.code == 0?1500:3000)
							if(res.data.code == 0){
								uni.hideLoading()
								that.applyState = -1
							}
						},1500)
					})
				}
			},
			radioChange(index){
				if(index == this.currentIndex){
					this.currentIndex = -1
				}else{
					this.currentIndex = index
				}
			},
			showToggle(type){
				if(this.currentIndex < 0) return false
				switch(type){
					case 'open':
						this.transShow = true
						this.showMark = true
					break;
					case 'close':
						this.transShow = false
						this.showMark = false
					break;
				}
			},
			choosePay(e){
				this.paytype = e
			},
			showDeital(index){
				if(index == this.deitalIndex){
					this.deitalIndex = -1
				}else{
					this.deitalIndex = index
				}
				
			},
			showRule(){
				this.showMark = !this.showMark
				this.isShowRule = !this.isShowRule
			},
			drawProgressbg: function() {
				// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
				var ctx = uni.createCanvasContext('cpbg', this);
				ctx.setLineWidth(8); // 设置圆环的宽度
				ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
				ctx.setLineCap('round'); // 设置圆环端点的形状
				ctx.beginPath(); //开始一个新的路径
				ctx.arc(118, 120, 100, 0.75 * Math.PI, 0.25 * Math.PI, false);
				//设置一个原点(110,110)，半径为100的圆的路径到当前路径
				ctx.stroke(); //对当前路径进行描边
				ctx.draw();
			},
			drawCircle: function(step) {
				var ctx = uni.createCanvasContext('cpbar', this);
				// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
				var gradient = ctx.createLinearGradient(28, 55, 192, 55);
				gradient.addColorStop('0', '#ffb240');
				gradient.addColorStop('0.3', '#ecf448');
				gradient.addColorStop('0.5', '#56b921');
				gradient.addColorStop('1.0', '#40d660');
				ctx.setLineWidth(8);
				ctx.setStrokeStyle(gradient);
				ctx.setLineCap('round');
				ctx.beginPath();
				// 参数step 为绘制的百分比
				step = 0.015 * step + 0.75;
				if (step >= 2) {
					step = step % 2;
				}
				ctx.arc(118, 120, 100, 0.75 * Math.PI, step * Math.PI, false);
				ctx.stroke();
				ctx.draw();
			}
		},
		onLoad() {
			let that = this
			uni.showLoading({
				title:'加载中...',
				mask:true
			})
			jewel.post('credit_bill/my_credit',{},true,function(res){
				uni.hideLoading()
				that.ruleData = res.data.rule_desc
				if(res.data.code == -2){
					that.applyState = -2
					that.quota = res.data.data.quota
				}else if(res.data.code == -1){
					that.applyState = -1
					that.btnText = res.data.msg
				}else{
					that.applyState = 0
					that.accept_time = res.data.data.accept_time
					that.getData('load')
					jewel.post('Payment/payList',{repay:1},true,function(res){
						that.payList = res.data.data
					})
				}
			})
		},
		onPullDownRefresh() {
			if(this.applyState == 0){
				this.getData()
			}else{
				uni.stopPullDownRefresh()
			}
		},
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		}
	};
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		width: 100%;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.flex1{
		flex: 1;
	}
	.credit-cont{
		&-head{
			
			&-mid{
				width: 694rpx;
				height: 222rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				margin: 0 auto;
				box-shadow: 0px 0px 28rpx rgba(6,0,1,0.12);
				padding: 45rpx{
					top: 25rpx;
					bottom: 0;
				};
				box-sizing: border-box;
				&-money{
					font-size: 60rpx;
					font-weight: bold;
					color: #0aac2a;
				}
				&-text{
					font-size: 30rpx;
					padding-top: 3rpx;
					position: relative;
					&::after{
						content: '';
						position: absolute;
						left: -20rpx;
						top:50%;
						width: 8rpx;
						height: 28rpx;
						margin-top: -14rpx;
						background-color: #0aac2a;
					}
				}
				&-info{
					justify-content: space-between;
					margin-top: 10rpx;
					&-date{
						font-size: 28rpx;
						color: #808080;
					}
					&-money{
						font-size: 30rpx;
					}
				}
			}
			&-progress{
				position: relative;
				width: 240px;
				height: 240px;
				background-image: url(../../static/images/credit/circle_line.png);
				background-repeat: no-repeat;
				background-position: top center;
				background-size: contain;
				margin: 30rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				&-bg {
					position: absolute;
					width: 240px;
					height: 240px;
					left:0;
					top:0;
				}
				&-bar {
					width: 240px;
					height: 240px;
					position: absolute;
					left:0;
					top:0;
				}
				&-txt {
					font-size: 28rpx;
					color: #999999;
					&-info {
						font-size: 60rpx;
						letter-spacing: 2rpx;
						color: #0aac2a;
					}
				}
				&-time{
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					font-size: 28rpx;
					color: #a0a0a0;
				}
				.progress_dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #fb9126;
				}
			}
		}
		&-bill{
			padding: 0 28rpx;
			&-title{
				padding: 35rpx 0;
				font-size: 30rpx;
			}
			&-list{
				&-item{
					position: relative;
					background-color: #FFFFFF;
					border-radius: 10rpx;
					padding: 15rpx 25rpx;
					margin-bottom: 20rpx;
					box-shadow: 0 -11rpx 27rpx #d2d2d2;
					&-radio{
						position: absolute;
						left: -20rpx;
						top: -15rpx;
					}
					&-time{
						color: #808080;
						font-size: 30rpx;
						border-bottom: 1px solid #efefef;
						line-height: 74rpx;
						padding: 0 10rpx;
					}
					&-info{
						padding: 0 10rpx;
						height: 100rpx;
						justify-content: space-between;
						&-text{
							width: 400rpx;
							font-size: 30rpx;
						}
						&-money{
							font-size: 36rpx;
							color: #d71511;
						}
					}
					&-page{
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 50rpx;
						padding: 0 10rpx;
						&-text{
							color: #666666;
							font-size: 28rpx;
						}
						&-num{
							font-size: 30rpx;
							&-money{
								font-size: 36rpx;
							}
						}
					}
					&-line{
						background-color: #f5f5f5;
						width: 100%;
						height: 1px;
						margin: 10rpx 0;
					}
					.red{
						color: #d71511;
					}
					&-arrow{
						display: flex;
						justify-content: center;
					}
				}
			}
		}
		&-btn{
			text-align: center;
			color: #FFFFFF;
			line-height: 105rpx;
			background-color: #0aac2a;
			font-size: 38rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-shadow: 0 -4rpx 13rpx rgba(204,204,204,0.54);
			display: flex;
			&-bg{
				width: 100%;
				height: 115rpx;
			}
			&-apply{
				text-align: center;
				color: #FFFFFF;
				line-height: 110rpx;
				background-color: #0aac2a;
				font-size: 38rpx;
				width: 576rpx;
				box-shadow: 6rpx 11rpx 0 #95dba3;
				margin: 0 auto;
				border-radius: 50px;
				margin-top: 60rpx;
			}
			&-explain{
				position: fixed;
				bottom: 50rpx;
				left: 0;
				width: 100%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				image{
					width: 26rpx;
					height: 26rpx;
					margin-left: 10rpx;
				}
			}
			&-all{
				background-color: #D71511;
			}
		}
		&-rule{
			background-color: #FFFFFF;
			position: relative;
			width: 600rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			padding: 20rpx;
			line-height: 40rpx;
			&-close{
				position: absolute;
				bottom: -130rpx;
				left: 50%;
				margin-left: -43rpx;
				width: 86rpx;
				height: 86rpx;
			}
		}
	}
	.pay-box{
		z-index: 10;
		background-color: #FFFFFF;
		border-radius: 15px 15px 0 0;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		left: 0;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		&-close{
			position: absolute;
			right: 26rpx;
			top: 30rpx;
			z-index: 11;
		}
		&-title{
			color: #252525;
			text-align: center;
			font-size: 38rpx;
			line-height: 122rpx;
		}
		&-btn{
			width: 636rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 50px;
			margin: 0 auto;
			text-align: center;
			font-size: 40rpx;
			color: #FFFFFF;
			background-color: #0aac2a;
			margin-top: 36rpx;
		}
		&-cont{
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				&-info{
					display: flex;
					align-items: center;
					image{
						width: 74rpx;
						height: 74rpx;
					}
					&-text{
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
				&-icon{
					image{
						width: 43rpx;
						height: 43rpx;
						display: block;
					}
				}
			}
		}
	}	
	.gay{
		background-color: #cccccc !important;
		box-shadow: 0 -4rpx 13rpx rgba(204,204,204,0.54);
	}
	.applyGay{
		background-color: #cccccc;
		box-shadow: 0rpx 0rpx 0 #95dba3;
	}
	
</style>
